﻿@model FreedBack.Models.FeedbackFormModel
@{
    Layout = null;

    ViewContext.ClientValidationEnabled = false;

    //Containers
    var feedbackTypeContainerId = "Container_FeedbackTypeId";
    var areaOfFeedbackContainerId = "Container_AreaOfFeedbackId";
    var areaOfFeedbackOtherContainerId = "Container_AreaOfFeedbackOther";
    var ratingValueContainerId = "Container_RatingValueId";
    var commentsContainerId = "Container_Comments";
    var submitContainerId = "Container_Submit";

    //Control Id's
    //var feedbackTypeId = "FeedbackTypeId";
    var areaOfFeedbackId = "AreaOfFeedbackId";
    //var areaOfFeedbackOtherId = "AreaOfFeedbackOther";
    var ratingValueId = "RatingValueId";
    var starsRatingValueId = "StarsRatingValueId";

    //Feedback Type Id's
    var feedbackTypeComplimentId = string.Concat("FeedbackTypeId_", Convert.ToInt32(FreedBack.Core.Entities.IdentificationEnums.FeedbackTypes.Compliment));
    var feedbackTypeSuggestionId = string.Concat("FeedbackTypeId_", Convert.ToInt32(FreedBack.Core.Entities.IdentificationEnums.FeedbackTypes.Suggestion));
    var feedbackTypeIssueId = string.Concat("FeedbackTypeId_", Convert.ToInt32(FreedBack.Core.Entities.IdentificationEnums.FeedbackTypes.Issue));
    var feedbackTypeQuestionId = string.Concat("FeedbackTypeId_", Convert.ToInt32(FreedBack.Core.Entities.IdentificationEnums.FeedbackTypes.Question));

}
<!DOCTYPE html>
<html>
<head>
    <title>Provide Feedback</title>
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/silk-sprite.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/rateit.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.rateit.js")" type="text/javascript"></script>
    @*    <script src="@Url.Content("~/Scripts/MvcFoolproofValidation.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/mvcfoolproof.unobtrusive.min.js")" type="text/javascript"></script>*@
    <script src="@Url.Content("~/Scripts/_freedback.js")" type="text/javascript"></script>
    @MvcMiniProfiler.MiniProfiler.RenderIncludes()
    <script type="text/javascript">
        $(document).ready(function () {
            initValidation();
        });


        function hideAndClear(ctrl) {
            $(ctrl).find(':input').each(function () {
                switch (this.type) {
                    case 'password':
                    case 'select-multiple':
                    case 'select-one':
                    case 'text':
                    case 'textarea':
                        $(this).val('');
                        break;
                    case 'checkbox':
                    case 'radio':
                        this.checked = false;
                }
            });
            ctrl.hide(500);
        }

        function showAndDefault(ctrl, newVal) {
            ctrl.show(500);
            $(ctrl).find(':input').each(function () {
                switch (this.type) {
                    case 'password':
                    case 'select-multiple':
                    case 'select-one':
                    case 'text':
                    case 'textarea':
                        if (newVal != null) {
                            $(this).val(newVal);
                        }
                        $(this).focus();
                        break;
                    case 'checkbox':
                    case 'radio':
                        if (newVal != null) {
                            this.checked = (newVal == true || newVal == 1);
                        }
                        $(this).focus();
                }
            });
        }

        function getRatingValue(selectedId) {
            var item = ratingValues[selectedId];
            return item;
        }

        var ratingValues = {};

        function initValidation() {
            $('#@feedbackTypeContainerId').show(0);
            $('#@areaOfFeedbackContainerId').hide(0);
            $('#@areaOfFeedbackOtherContainerId').hide(0);
            $('#@ratingValueContainerId').hide(0);
            $('#@commentsContainerId').hide(0);
            $('#@submitContainerId').hide(0);


            $('#@feedbackTypeContainerId').find(':radio').each(function () {
                $(this).change(function () {
                    $('#@areaOfFeedbackContainerId').show(500);
                });
            });

            $('#@areaOfFeedbackId').change(function () {
                if ($('#@areaOfFeedbackId option:selected').val() == '@Convert.ToInt32(FreedBack.Core.Entities.IdentificationEnums.AreasOfFeedback.Other)') {
                    showAndDefault($('#@areaOfFeedbackOtherContainerId'));
                }
                else {
                    hideAndClear($('#@areaOfFeedbackOtherContainerId'));
                }
                showAndDefault($('#@ratingValueContainerId'), 0);
            });

            $('#RatingValueId').each(function () {
                $('option', this).each(function () {
                    ratingValues[$(this).val()] = $(this).text();
                })
            });

            $('#@starsRatingValueId').rateit();
            $("#@starsRatingValueId").bind('hover', function (event, value) {
                $(this).attr('title', getRatingValue(value));
            });
            $('#@starsRatingValueId').bind('rated', function (event, value) {
                showAndDefault($('#@commentsContainerId'), '');
                showAndDefault($('#@submitContainerId'), null);
            });
        }
    </script>
</head>
<body>
    <div id="test" class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true"
        data-rateit-readonly="true">
    </div>
    @using (Html.BeginForm("ProvideFeedback", "Home", FormMethod.Post, new { @class = "form-stacked" }))
    {
        @Html.BootstrapValidationSummary(true, false, "Please fix the following errors and try again:")
        <fieldset>
        <legend></legend>
            <div class="clearfix" id="@feedbackTypeContainerId">
                @Html.LabelFor(model => model.FeedbackTypeId)
                <div class="input" id="feedbackTypeButtonContainer">
                    <label class="btn success labelButton">
                        <span class="labelButtonIcon ui-silk ui-silk-award-star-gold-3"></span>
                        @Html.RadioButtonFor(model => model.FeedbackTypeId, Convert.ToInt32(FreedBack.Core.Entities.IdentificationEnums.FeedbackTypes.Compliment))
                        Compliment
                    </label>
                    <label class="btn info labelButton">
                        <span class="labelButtonIcon ui-silk ui-silk-comment"></span>
                        @Html.RadioButtonFor(model => model.FeedbackTypeId, Convert.ToInt32(FreedBack.Core.Entities.IdentificationEnums.FeedbackTypes.Suggestion))
                        Suggestion
                    </label>
                    <label class="btn danger labelButton">
                        <span class="labelButtonIcon ui-silk ui-silk-stop"></span>
                        @Html.RadioButtonFor(model => model.FeedbackTypeId, Convert.ToInt32(FreedBack.Core.Entities.IdentificationEnums.FeedbackTypes.Issue))
                        Issue
                    </label>
                    <label class="btn labelButton">
                        <span class="labelButtonIcon ui-silk ui-silk-help"></span>
                        @Html.RadioButtonFor(model => model.FeedbackTypeId, Convert.ToInt32(FreedBack.Core.Entities.IdentificationEnums.FeedbackTypes.Question))
                        Question
                    </label>
                    <span class="help-inline">@Html.ValidationMessageFor(model => model.FeedbackTypeId)</span>
                </div>
            </div>
            <div class="clearfix" id="@areaOfFeedbackContainerId">
                @Html.LabelFor(model => model.AreaOfFeedbackId)
                <div class="input">
                    @Html.DropDownListFor(model => model.AreaOfFeedbackId, (IEnumerable<SelectListItem>)ViewBag.AllAreasOfFeedback)
                    <span class="help-inline">@Html.ValidationMessageFor(model => model.AreaOfFeedbackId)</span>
                </div>
            </div>
            <div class="clearfix" id="@areaOfFeedbackOtherContainerId">
                @Html.LabelFor(model => model.AreaOfFeedbackOther)
                <div class="input">
                    @Html.TextBoxFor(model => model.AreaOfFeedbackOther)
                    <span class="help-inline">@Html.ValidationMessageFor(model => model.AreaOfFeedbackOther)</span>
                </div>
            </div>
            <div class="clearfix" id="@ratingValueContainerId">
                @Html.LabelFor(model => model.RatingValueId)
                <div class="input">
                    @Html.DropDownListFor(model => model.RatingValueId, (IEnumerable<SelectListItem>)ViewBag.AllRatingValues)
                    <div id="@starsRatingValueId" class="rateit" data-rateit-backingfld="#@ratingValueId" data-rateit-resetable="false">
                    </div>
                    <span class="help-inline">@Html.ValidationMessageFor(model => model.RatingValueId)</span>
                </div>
            </div>
            <div class="clearfix" id="@commentsContainerId">
                @Html.LabelFor(model => model.Comments)
                <div class="input">
                    @Html.TextAreaFor(model => model.Comments, 4, 80, null)
                    <span class="help-inline">@Html.ValidationMessageFor(model => model.Comments)</span>
                </div>
            </div>
            @Html.HiddenFor(model => model.SourceClientUserId)
            @Html.HiddenFor(model => model.SourceUrl)
            <div class="clearfix" id="@submitContainerId">
                <div class="input">
                    <input type="submit" value="Submit Feedback" class="btn primary" />
                </div>
            </div>
        </fieldset>
    }
</body>
</html>

